<template>
  <div class="grade-statistics">
    <a-card title="成绩统计">
      <template #extra>
        <a-button @click="$router.back()">返回</a-button>
      </template>

      <a-form layout="inline" class="search-form">
        <a-form-item label="班级">
          <a-input 
            v-model:value="searchForm.class_name" 
            placeholder="请输入班级" 
            style="width: 200px" 
            allow-clear
          />
        </a-form-item>
        <a-form-item label="学年">
          <a-select 
            v-model:value="searchForm.time" 
            placeholder="请选择" 
            style="width: 150px" 
            allow-clear
          >
            <a-select-option :value="2024">2024</a-select-option>
            <a-select-option :value="2023">2023</a-select-option>
            <a-select-option :value="2022">2022</a-select-option>
            <a-select-option :value="2021">2021</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch" :loading="loading">查询</a-button>
            <a-button @click="handleReset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <a-divider />

      <a-row :gutter="16" v-if="hasData">
        <a-col :span="8">
          <a-card>
            <a-statistic
              title="总成绩数"
              :value="statistics.total_students"
              :value-style="{ color: '#3f8600' }"
            >
              <template #suffix>
                <span style="font-size: 14px;">条</span>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card>
            <a-statistic
              title="平均分"
              :value="statistics.avg_grade"
              :precision="2"
              :value-style="{ color: '#1890ff' }"
            >
              <template #suffix>
                <span style="font-size: 14px;">分</span>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card>
            <a-statistic
              title="查询条件"
              :value="queryCondition"
              :value-style="{ fontSize: '18px' }"
            />
          </a-card>
        </a-col>
      </a-row>

      <a-empty v-else description="请设置筛选条件后查询统计数据" style="margin-top: 60px;" />
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { gradeAPI } from '@/api/grade'

const router = useRouter()
const loading = ref(false)
const hasData = ref(false)

const searchForm = reactive({
  class_name: '',
  time: undefined as number | undefined
})

const statistics = ref({
  total_students: 0,
  avg_grade: 0,
  class_name: '',
  time: undefined as number | undefined
})

// 查询条件显示
const queryCondition = computed(() => {
  const parts: string[] = []
  if (statistics.value.class_name) {
    parts.push(statistics.value.class_name)
  }
  if (statistics.value.time) {
    parts.push(`${statistics.value.time}学年`)
  }
  return parts.length > 0 ? parts.join(' / ') : '全部'
})

// 查询统计
const handleSearch = async () => {
  if (!searchForm.class_name && !searchForm.time) {
    message.warning('请至少设置一个筛选条件')
    return
  }

  loading.value = true
  try {
    const res = await gradeAPI.getStatistics({
      class_name: searchForm.class_name || undefined,
      time: searchForm.time
    })
    statistics.value = res.data as any
    hasData.value = true
  } catch (error: any) {
    message.error('加载统计数据失败: ' + (error.response?.data?.message || error.message))
    hasData.value = false
  } finally {
    loading.value = false
  }
}

// 重置
const handleReset = () => {
  searchForm.class_name = ''
  searchForm.time = undefined
  hasData.value = false
  statistics.value = {
    total_students: 0,
    avg_grade: 0,
    class_name: '',
    time: undefined
  }
}
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
}
</style>
